<template>
  <div>
    <h2>发布 / 编辑文章</h2>
    <el-form :model="form" ref="form" label-width="100px" class="demo-form">
      <!-- 标题 -->
      <el-form-item label="标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <!-- 富文本框 -->
      <el-form-item label="内容">
        <VueEditor
          v-model="form.content"
          :useCustomImageHandler="true"
          @image-added="imgUpload"
        />
      </el-form-item>
      <el-form-item label="分类">
        <!-- el-checkbox-group 的 v-model 用来储存对应被选中数据 -->
        <!-- 勾选之后放入数组的是 label 属性, 但是有可能我们想要的显示
        和 labe了不一样, 那么可以放在开闭标签之间 -->
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="category in categoryList"
            :key="category.id"
            :label="category.id"
          >
            {{ category.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
          :action="$axios.defaults.baseURL + '/upload'"
          list-type="picture-card"
          :on-success="coverSuccess"
          :on-remove="coverRemove"
          :file-list="form.cover"
          :headers="{
            Authorization: 'Bearer ' + token,
          }"
        >
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">文章</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onsubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import LoginVue from "./Login.vue";
// 引入富文本框组件
import { VueEditor } from "vue2-editor";
export default {
  data() {
    return {
      token: localStorage.getItem("token"),

      checkList: [],
      categoryList: [],
      // 创建一个对象封装编辑文章请求里面的全部的数据
      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
    };
  },
  watch: {
    checkList() {
      //每当分类选项发生改变时 就手动处理格式赋值到 form表单中
      //数字转换为带有id 属性的对象
      this.form.categories = this.checkList.map((id) => {
        return {
          id,
        };
      });
    },
  },
  components: {
    //注册富文本框组件
    VueEditor,
  },
  created() {
    // 判断是新增还是编辑 有id就是编辑
    if (this.$route.query.id) {
      // 加载旧数据
      this.$axios({
        url: "/post/" + this.$route.query.id,
        data: this.form,
      }).then((res) => {
        console.log(res.data);
        // 如果进行数据改造, 最好先全部改造完成后赋值
        res.data.data.content = res.data.data.content.replace(/div/g, "p");
        // 改造分类勾选框数据
        this.checkList = res.data.data.categories.map((item) => {
          return item.id;
        });
        // 处理编辑文章页的图片问题
        const oldCover = res.data.data.cover;
        const newCover = oldCover.map((cover) => {
          if (cover.url.indexOf("http") == -1) {
            cover.url = this.$axios.defaults.baseURL + cover.url;
          }
          // 强制设定唯一 uid 避免上传组件渲染报错
          cover.uid = cover.id;
          return cover;
        });
        res.data.data.cover = newCover;
        this.form = res.data.data;
      });
    }
    this.loadCategory();
  },
  methods: {
    onsubmit() {
      // 这里是点击了发布按钮
      this.$axios({
        method: "post",
        url: "/post",
        data: this.form,
      }).then((res) => {
        if (res.data.message == "文章发布成功") {
          this.$message.success("发布成功");
          this.$router.push("/postlist");
        }
      });
      console.log(this.form);
      console.log(this.checkList);
    },
    coverSuccess(res, file) {
      // res 是上传后的结果
      // file 上传的图片本身
      // 现在我们的 form.cover 有两个功能
      // 第一我们需要用来发送 api 请求 要求有 id
      file.id = res.data.id;
      // 第二现在这个跟上传组件的文件列表绑定了, 上传组件需要这个文件 file 数据来显示图片
      this.form.cover.push(file);
      console.log("上传成功");
      console.log(res);
    },
    coverRemove(file, fileList) {
      // fileList 是删除后的最新文件列表
      this.form.cover = fileList;
      this.$message("已删除");

      console.log("删除成功");
    },
    imgUpload(file, editor, cursorLocation, resetUploader) {
      // 富文本框自定义的图片处理函数
      console.log("富文本图片上传");
      // 手动上传图片
      const data = new FormData();
      data.append("file", file);

      this.$axios({
        method: "post",
        url: "/upload",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
        data,
      }).then((res) => {
        //上传完毕后获取到图片地址 拼接完整
        const url = this.$axios.defaults.baseURL + res.data.data.url;
        console.log(url);
        // 放入编辑光标位置
        editor.insertEmbed(cursorLocation, "image", url);
        // 3. 清理上传组件
        resetUploader();
      });
    },

    loadCategory() {
      this.$axios({
        url: "/category",
      }).then((res) => {
        console.log(res.data.data);
        // 获取到的数据是所有的分类
        // 其中头条和关注部分都应该被过滤掉, 剩下其他分类
        this.categoryList = res.data.data.filter((category) => {
          // return 为 true 的数据可以继续保留, false 被排除
          return category.id != 0 && category.id != 999;
        });
        console.log(this.categoryList);
      });
    },
  },
};
</script>

<style lang="less" scoped>
h2 {
  margin-bottom: 20px;
}
.el-form {
  padding-right: 100px;
}
/deep/ .ql-formats {
  line-height: 0.5;
}
</style>